import { Component, OnInit, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
import { DataSourceService } from "../../../../service/data-source/data-source.service";
import { DatePipe } from "@angular/common";
import {HttpClient} from '@angular/common/http';
import { Farm } from "../../../../entity/farm.model";
import { TagData } from "../../../../entity/tag-data.model";
import { ApplicationService } from "../../../../service/application.service";

@Component({
  selector: 'app-wind-speed-distribution',
  templateUrl: './wind-speed-distribution.component.html',
  styleUrls: ['./wind-speed-distribution.component.css']
})
export class WindSpeedDistributionComponent implements OnInit {
  @Input() seriesData: number[][]=[];
  @Input() titleText: string;
  @Input() center: boolean;
  options: any;
  echartsIntance: any;
  constructor(
    private application: ApplicationService,
    private dataSource: DataSourceService,
    private datePipe: DatePipe,
    private http: HttpClient,
  ) { }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['seriesData'] && changes['seriesData'].currentValue) {
        this.initEcharts()

    }


  }
  ngOnInit() {
    this.initEcharts()
  }
  initEcharts() {
    this.options = {
      grid: {
        top: 5,
        left: 10,
        bottom: 20,
        right: 20
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: "line",
        formatter: (params) => {
          let res = ""
          for (let i = 0; i < params.length; i++) {
            res += params[i].value[0] + "(m/s)占比:" + params[i].value[1] + "%"
          };
          return res;
        },
      },
      xAxis: {
        min: 0,
        max: 25,
        //name: "风速(m/s)",

        axisLabel: {
          textStyle: {
            color: '#fff'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            opacity: 0.2
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            opacity: 0.1
          }
        },
        splitNumber: 25
        //data: this.xAxisData
      },
      yAxis: {
        //name: "百分比(%)",
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: '#fff'
          },
          margin: 20
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
            opacity: 0.2
          }
        },
        splitLine: {
          lineStyle: {
            color: "#fff",
            opacity: 0.1
          }
        }
      },
      /*  dataZoom: [
         {
           type: 'inside'
         }
       ], */
      series: [
        {
          type: 'bar',
          barWidth: '50%',
          maxWidth: "50%",
          itemStyle: {
            //通常情况下：
            normal: {
              color: "#23b14d"
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top',

              formatter: (params) => {
                return params.data[1]
              }
            }
          },
          data: this.seriesData,
        }
      ]
    };
  }
  onChartInit(ec: any) {
    this.echartsIntance = ec;
  }

  //更新图表数据
  updateEchart() {
    if (this.echartsIntance != null) {
      this.echartsIntance.setOption(this.options);
    }
  }
}


// WEBPACK FOOTER //
// ./src/app/module/monitor/wind-energy/wind-speed-distribution/wind-speed-distribution.component.ts
